import clsx from "clsx";
import Heading from "@theme/Heading";
import styles from "./styles.module.css";

type FeatureItem = {
	title: string;
	Svg: React.ComponentType<React.ComponentProps<"svg">>;
	description: JSX.Element;
};

const FeatureList: FeatureItem[] = [
	{
		title: "收银系统",
		Svg: require("@site/static/img/cash-machine.svg").default,
		description: <> 支持多种方式收款：微信、支付宝、现金、账户余额；</>,
	},
	{
		title: "商品管理",
		Svg: require("@site/static/img/goods.svg").default,
		description: <>支持对商品进行增删改查、支持扫码枪、支持自动生成首字母助记码</>,
	},
	{
		title: "会员系统",
		Svg: require("@site/static/img/member.svg").default,
		description: <>支持会员充值、退款、余额日志、积分日志等功能</>,
	},
	{
		title: "库存系统",
		Svg: require("@site/static/img/kucun.svg").default,
		description: <>商品销售与退货自动增减库存；商品库存低于下限自动提示</>,
	},
	{
		title: "报表统计",
		Svg: require("@site/static/img/eschart.svg").default,
		description: <>支持日报表统计、月统计、年统计、商品销量统计、进货统计、员工销售统计</>,
	},
	{
		title: "多店员权限",
		Svg: require("@site/static/img/quanxian.svg").default,
		description: <>采用角色权限管理系统，支持给不同的店员设置不同的管理权限。</>,
	},
];

function Feature({ title, Svg, description }: FeatureItem) {
	return (
		<div className={clsx("col col--4")}>
			<div className='text--center'>
				<Svg className={styles.featureSvg} role='img' />
			</div>
			<div className='text--center padding-horiz--md'>
				<Heading as='h3'>{title}</Heading>
				<p>{description}</p>
			</div>
		</div>
	);
}

export default function HomepageFeatures(): JSX.Element {
	return (
		<section className={styles.features}>
			<div className='container'>
				<div className='row'>
					{FeatureList.map((props, idx) => (
						<Feature key={idx} {...props} />
					))}
				</div>
			</div>
		</section>
	);
}
